<template>
  <view>
    <scroll-view class="bg-white nav text-center fixed navOrder" :style="[{top:0 + 'upx'}]" >
      <view class="cu-item tap_highlight"
            :class="item.key==tabValue?'text-primary':''"
            style="margin: 0 10upx 20upx 0;"
            :style="styles"
            v-for="(item,index) in list" :key="index"
            :data-id="index" @tap="changeTab(item)">
        <view style="position:relative">
          {{item.name}}
          <text v-if="item.key==tabValue" class="cuIcon-title" style="position:absolute;bottom:-40upx;left:45%"></text>
        </view>
      </view>
    </scroll-view>
    <view :style="{height:height+'rpx'}"></view>
  </view>
</template>

<script>
  export default {
    components: {
    },
    props:{
      list:{
        type:Array,
        default:()=>{
          return []
        }
      },
      tabType:{
        type:[String,Number],
        default:''
      },
      styles:{
        type:String,
        default:''
      },
      height:{
        type:[String,Number],
        default:140
      }
    },
    data() {
      return {
        tabValue:this.tabType,
      }
    },
    watch:{
      tabType(news, olds){
        this.tabValue = news;
      },
      tabValue(news, olds){
        this.$emit('changeTabType',news)
      },
    },
    onLoad(opt) {
    },
    methods: {
      changeTab (item) {
        this.$emit('change',item)
      }
    }
  }
</script>

<style lang="less" scope>
@import '@/common/style/main.css';
</style>
